<template>
    <div class="adrequest">
    <div class="searchtitle shadow">
      <div class="searchitem">
        <div class="item_id">{{$t('request.reor')}}</div>
        <el-input 
        v-model="searchdetail.orderNo"
        class="inputline_id" prefix-icon="el-icon-search" :placeholder="$t('login.pl')"></el-input>
      </div>
      <div class="searchitem">
        <div class="item_name">{{$t('request.recoins')}}</div>
        <el-input 
        v-model="searchdetail.coin"
        class="inputline_name"  prefix-icon="el-icon-search" :placeholder="$t('login.pl')"></el-input>
      </div>
      <br/> 
      <div class="searchitem">
        <div class="item_user">{{$t('request.resta')}}</div>
            <el-select v-model="searchdetail.status" :placeholder="$t('placedefaut')">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
            </el-select>
      </div>
      <div class="searchitem selcetime">
        <div class="item_time">{{$t('request.time')}}</div>
        <el-date-picker
            class="inputline_date"
            v-model="searchdetail.datetime"
            type="daterange"
            align="right"
            size="mini"
            unlink-panels
            range-separator="-"
            :start-placeholder="$t('form.starttime')"
            :end-placeholder="$t('form.endtime')"
            :picker-options="pickerOptions"
            :clearable="false"
        >
          <!--  :picker-options="pickerOptions"-->
        </el-date-picker>
      </div>
      <div class="searchitem searchBtn">
          <el-button @click="resetSearch" class="btnser" icon="el-icon-refresh-left"  ></el-button>
          <el-button @click="goSearch" class="btnser" icon="el-icon-search"  type="primary" ></el-button>
      </div>
      <div class="searchitem " v-if="pagestaicdata">
      {{$t('form.clcData')}} {{$t('request.renum')}}：{{pagestaicdata.submitNumber}} {{$t('request.recoins')+$t('mallinfo.total')}}： {{pagestaicdata.totalSendCoin}} {{$t('request.tran')}}（USD）：{{pagestaicdata.actualAmountUSD}}{{$t('request.tran')}}（HKD):{{pagestaicdata.actualAmountHKD}}      
      </div>
    </div>
    <div class="content">
      <el-button type="primary" :loading="download" class="export" @click="exportExcel" size="mini">{{$t('exceldown')}}</el-button>
      <el-table
          :data="currentData"
          style="width: 100%;font-size: 13px;margin-top: 35px"
          border
          height="500px"
          class="adrequestTabble"
          stripe
          fit
          >
        <el-table-column
        prop="orderNo"
        :label="$t('table.orNumber')"
        width="250"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        :label="$t('table.request')"
        >
      </el-table-column>
      <el-table-column
        prop="erbanNO"
        label="higoID">
      </el-table-column>
      <el-table-column
        prop="userNick"
        :label="'higo'+$t('table.nick')">
      </el-table-column>
        <el-table-column
        prop="realName"
        :label="$t('table.name')">
      </el-table-column>

      <el-table-column
        prop="bankName"
        :label="$t('table.transferBank')"
        width="125"
        >
        
      </el-table-column>
            <el-table-column
        prop="amount"
        :label="$t('table.transferAmount')"
        width="125"
        >
      </el-table-column>
       <el-table-column
        prop="bankNumber"
        :label="$t('table.transferBankAccount')"
        width="125"
        >
      </el-table-column>
                  <el-table-column
        prop="bankCode"
        :label="$t('table.bankCode')">
      </el-table-column>
        <el-table-column
        prop="bankOrderNo"
        :label="$t('table.transferBankOrnum')"
        width="130"
        >
      </el-table-column>

        <el-table-column
            align="center"
            prop="status"
            :label="$t('table.status')"
           >
        </el-table-column>
        <el-table-column
            align="center"
            prop="handleTime"
            :label="$t('request.hand')"
           >
        </el-table-column>
      </el-table>
       <el-pagination
  class="foot"
  background
  layout="prev, pager, next"
  :total="itemnum"
  @current-change="handleCurrent"
  :current-page.sync="pageNo"
  > 
</el-pagination>
    </div>
  </div>

</template>

<script>
import {getAdminUser,MalliCoinRecord, mallstatistics}from "../Util/request"
import { clctime } from '../Util/tool';
export default {
        data() {
            return {
                searchdetail:{
                    orderNo:"",
                    datetime:[],
                    coin:"",
                    status:null
                },
                pickerOptions: {
                shortcuts: [{
                 text: '最近一周',
                 onClick(picker) {
                   const end = new Date();
                   const start = new Date();
                   start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                   picker.$emit('pick', [start, end]);
                    }
                 }, 
                 {
                 text: '最近一个月',
                 onClick(picker) {
                   const end = new Date();
                   const start = new Date();
                   start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                   picker.$emit('pick', [start, end]);
                 }
                 }, 
                 {
                   text: '最近三个月',
                   onClick(picker) {
                     const end = new Date();
                     const start = new Date();
                     start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                     picker.$emit('pick', [start, end]);
                   }
                 }
                 ]
                },
                tableData:[
                ],
                currentData:[],
                mallId:'',
                itemnum:0,
                pageNo:1,
                options:[
                  {
                  value: 1,
                  label:this.$t('request.s1')
                },
                                  {
                  value: 0,
                  label: this.$t("request.s0")
                },
                                  {
                  value: -1,
                  label: this.$t("request.s_1")
                },
                ],
                pagestaicdata:null,
                download:false

            }
        },
        methods: {
            handleCurrent(e){
                 let temp ={}
                 let startime=null
                 let endtime=null
                if(this.searchdetail.datetime[0]){        
                startime= clctime(this.searchdetail.datetime[0])
                temp.startTime = startime
                }
                if(this.searchdetail.datetime[1]){
                endtime= clctime(this.searchdetail.datetime[1])
                temp.startTime = endtime
            }       
                for(let i in this.searchdetail){
                if(i!="datetime"){
                if(this.searchdetail[i]||i=="status"){
                temp[i]=this.searchdetail[i]
                }
                }
         
            }
                MalliCoinRecord((res)=>{
                     this.currentData = res.data.list
                     this.itemnum=res.data.total
                 },{mallId:this.mallId,
                    page:e,
                    ...temp
                 })
               
            },
            resetSearch(){
                this.searchdetail={
                    orderNo:"",
                    datetime:[],
                    coin:"",
                    status:null
                }
                MalliCoinRecord((res)=>{
       

                this.tableData = res.data.list

                this.itemnum=res.data.total
                this.currentData=this.tableData.slice(0,10)
         
                },{mallId:this.mallId})
                this.pageNo =1
            },
             goSearch(){
                 let temp ={}
                 let startime=null
                 let endtime=null
                if(this.searchdetail.datetime[0]){        
                startime= clctime(this.searchdetail.datetime[0],true)
                temp.startTime = startime
                }
                if(this.searchdetail.datetime[1]){
                endtime= clctime(this.searchdetail.datetime[1])
                temp.endTime = endtime
                 }
        
                for(let i in this.searchdetail){
                    if(i!="datetime"){
                     if(this.searchdetail[i]||i=="status"){
                         temp[i]=this.searchdetail[i]
                        }
                    }
         
                 }
              MalliCoinRecord((res)=>{
                     this.currentData = res.data.list
                     this.itemnum=res.data.total
                 },{
                    mallId:this.mallId,
                    ...temp
                 })
            this.getstatic({
                ...temp
            })

                  this.pageNo =1
             },
             getstatic(e){
                 mallstatistics((res)=>{
                  this.pagestaicdata =res.data
                 },{
                     mallId:this.mallId,
                     ...e
                 })
             },
             exportExcel(){
                 this.download=true

                 let temp ={}
                 let startime=null
                 let endtime=null
                if(this.searchdetail.datetime[0]){        
                startime= clctime(this.searchdetail.datetime[0],true)
                temp.startTime = startime
                }
                if(this.searchdetail.datetime[1]){
                endtime= clctime(this.searchdetail.datetime[1])
                temp.endTime = endtime
                 }
        
                for(let i in this.searchdetail){
                    if(i!="datetime"){
                     if(this.searchdetail[i]||i=="status"){
                         temp[i]=this.searchdetail[i]
                        }
                    }
         
                 }
              MalliCoinRecord((res)=>{
         const exportdata = res.data.list
         import('@/Util/Export2Excel.js').then(excel => {
        const tHeader = [this.$t('table.orNumber'),this.$t('table.request'),'higoID','higo'+this.$t('table.nick'),this.$t('table.name'),this.$t('table.transferBank'),this.$t('table.transferAmount'),this.$t('table.transferBankAccount'),this.$t('table.bankCode'),this.$t('table.transferBankOrnum'),this.$t('table.status'),this.$t('request.hand')]
        const filterVal = ['orderNo', 'createTime', 'erbanNO', 'userNick', 'realName',"bankName",'amount','bankNumber','bankCode','bankOrderNo','status',"handleTime"]
        const list = exportdata;
        const data =  this.formatJson(filterVal,list)
        console.log(data);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "HIGO AGENT RECORD",
          autoWidth: true,
          bookType: "xlsx"
        })
         this.download =false
      })







                 },{
                    mallId:this.mallId,
                    ...temp,
                    rows:this.itemnum
                 })





















             },
             formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
             },

        
        },
        created(){
         getAdminUser((res)=>{
        // console.log(res);
        this.mallId=res.data.mallId
         this.getstatic({})
        MalliCoinRecord((res)=>{
        console.log(res,"用户信息");

         this.tableData = res.data.list
         
         this.itemnum=res.data.total
         this.currentData=this.tableData.slice(0,10)
         
      },{mallId:this.mallId})
      })
     
        },
        watch:{
            currentData:{
                handler(n){
                    n.forEach(el => {
                            switch (el.status) {
                                case 1:
                                    el.status="已发放"
                                    break;
                                case 0:
                                    el.status="待处理"
                                    break;
                                case -1:
                                    el.status="已驳回"
                                    break;
                                default:
                                    break;
                            }
                            el.amount = el.amount+el.currency
                    });
                }
            }
        }
       
}
</script>

<style lang="less" scoped>
    .shadow{
         box-shadow: -8px -4px 19px #b7b7b7;
    }
.adrequest{
    width: 100%;
    height: 100%;
    .searchtitle{
        position: relative;
        width: 100%;
        height: 210px;
        // display: flex;
        // background-color: aqua;
        .searchitem{
            position: absolute;
            // display:inline-block ;
            font-size: 12px;
            width: 270px;
            // background-color: red;

            div{
                display: inline-block;
            }
            /deep/.el-input{
                height: 25px;
                line-height: 25px;
                margin-left: 15px;
                width: 50%;
                .el-input__inner{
                    height: 25px;
                    line-height: 25px;
                }
                .el-input__icon{
                    height: 25px;
                    line-height: 25px;
                }
            }  
            /deep/.el-select{
                width: 220px;
            }
        }
        .searchitem:nth-child(1){
            top: 10px;
            left: 30px;
        }
        .searchitem:nth-child(2){
            top: 81px;
            left: 30px;
        }
         .selcetime{
            top: 43px;
            left: 30px;
            width: 300px;
            .item_time{
                height:30px;
                line-height: 30px;
                vertical-align: top;
                margin-right: 15px;
            }
            /deep/.el-range-input{
                vertical-align: top;
            }
           /deep/ .el-range-separator{
                vertical-align: top;
            }
            .el-range-editor.el-input__inner{
                width: 210px;
            }
        }
        .searchBtn{
            // display: flex;
                top: 160px;
                left: 30px;
                .btnser{
                    width: 80px;
                }


        }
        .searchitem:nth-child(4){
            top: 115px;
            left: 30px;
            width: 320px;
        }
        .searchitem:nth-last-child(1){
            font-size: 15px;
            font-weight: 700;
            width:1200px;
            top:230px;
            text-indent: 10px;
        }
    }
    .content{
        width: 100%;
        margin-top: 15px;
        position: relative;
        overflow: hidden;
        .export{
            position: absolute;
            top: 0;
            right: 0;
        }
        .adrequestTabble{
        //    margin-top: 25px;
          
      /deep/  ::-webkit-scrollbar{
      height: 10px;
     
      }
        /deep/::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
      border-radius   : 10px;
      background-color: skyblue;
      background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
      );
        }
       /deep/::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        background   : #ededed;
        // border: 0;
       }
        }
        
        .foot{
           float: right;
           
        }
    }
}
</style>